<template>
  <Dialog v-model="dialogVisible" title="从模板创建科目" width="800px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="选择模板" prop="templateId">
        <el-select
          v-model="formData.templateId"
          placeholder="请选择科目模板"
          style="width: 100%"
          @change="handleTemplateChange"
        >
          <el-option
            v-for="template in templateList"
            :key="template.id"
            :label="template.templateName"
            :value="template.id"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="科目名称" prop="subjectName">
        <el-input v-model="formData.subjectName" placeholder="请输入科目名称" />
      </el-form-item>
      
      <el-form-item label="科目代码" prop="subjectCode">
        <el-input v-model="formData.subjectCode" placeholder="请输入科目代码" />
      </el-form-item>
      
      <el-form-item label="科目描述" prop="subjectDescription">
        <el-input
          v-model="formData.subjectDescription"
          type="textarea"
          :rows="3"
          placeholder="请输入科目描述"
        />
      </el-form-item>
      
      <el-form-item label="模板预览" v-if="templatePreview">
        <el-card class="template-preview">
          <div class="template-info">
            <p><strong>模板名称：</strong>{{ templatePreview.templateName }}</p>
            <p><strong>适用职业：</strong>{{ templatePreview.professionName }}</p>
            <p><strong>技能等级：</strong>{{ templatePreview.skillLevel }}</p>
            <p><strong>评价方式：</strong>{{ templatePreview.evaluationMethod }}</p>
          </div>
        </el-card>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'SubjectTemplateCreate' })

const emit = defineEmits(['success'])

const dialogVisible = ref(false)
const formLoading = ref(false)
const formRef = ref()
const templateList = ref([])
const templatePreview = ref(null)

const formData = reactive({
  templateId: undefined,
  subjectName: '',
  subjectCode: '',
  subjectDescription: ''
})

const formRules = reactive({
  templateId: [{ required: true, message: '请选择科目模板', trigger: 'change' }],
  subjectName: [{ required: true, message: '请输入科目名称', trigger: 'blur' }],
  subjectCode: [{ required: true, message: '请输入科目代码', trigger: 'blur' }]
})

/** 打开弹窗 */
const open = async (planId: number) => {
  dialogVisible.value = true
  formData.planId = planId
  await getTemplateList()
  resetForm()
}

/** 重置表单 */
const resetForm = () => {
  formData.templateId = undefined
  formData.subjectName = ''
  formData.subjectCode = ''
  formData.subjectDescription = ''
  templatePreview.value = null
  formRef.value?.resetFields()
}

/** 获取模板列表 */
const getTemplateList = async () => {
  try {
    // TODO: 调用获取模板列表的API
    templateList.value = []
  } catch (error) {
    console.error('获取模板列表失败:', error)
  }
}

/** 模板变更处理 */
const handleTemplateChange = async (templateId: number) => {
  if (!templateId) {
    templatePreview.value = null
    return
  }
  
  try {
    // TODO: 调用获取模板详情的API
    templatePreview.value = templateList.value.find(t => t.id === templateId)
  } catch (error) {
    console.error('获取模板详情失败:', error)
  }
}

/** 提交表单 */
const submitForm = async () => {
  if (!formRef.value) return
  
  const valid = await formRef.value.validate()
  if (!valid) return
  
  try {
    formLoading.value = true
    // TODO: 调用从模板创建科目的API
    ElMessage.success('从模板创建科目成功')
    dialogVisible.value = false
    emit('success')
  } catch (error) {
    console.error('从模板创建科目失败:', error)
    ElMessage.error('从模板创建科目失败')
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped>
.template-preview {
  width: 100%;
}

.template-info p {
  margin: 8px 0;
  color: #606266;
}
</style>
